<template>
    <section id="k8s-pods">
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>详情</div>
            <hr>
            <div style="margin-bottom: 5px">名称：{{PodDetail.pods.name}}</div>
            <div style="margin-bottom: 5px">命名空间：{{PodDetail.pods.namespace}}</div>

            <div style="margin-bottom: 5px">标签：<el-tag size="mini" v-for="(v,key) in PodDetail.pods.labels "> {{key}}: {{v}}</el-tag></div>


            <div style="margin-bottom: 5px">创建时间：{{PodDetail.pods.createdate}}</div>
            <div style="margin-bottom: 5px">状态：{{PodDetail.pods.status}}</div>

            <div style="margin-bottom: 5px">节点：
                <el-link :href="'#/kubernetes/node/' + PodDetail.pods.nodename "  type="primary" :underline="false" >{{PodDetail.pods.nodename}}</el-link>
            </div>
            <div style="margin-bottom: 5px">IP：{{PodDetail.pods.podip}}</div>

            <div style="margin-bottom: 5px">NodeSelector：<el-tag size="mini" v-for="(v,key) in PodDetail.pods.nodeselector "> {{key}}: {{v}}</el-tag></div>

            <div style="margin-bottom: 5px">ServerAccountName：{{PodDetail.pods.serveraccount}}</div>




        </el-card>

        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>容器</div>
            <hr>
            <el-row>
                <el-col :span="12" v-for="container in PodDetail.pods.containers">
                    <!--<div style="margin-bottom: 5px">名称：{{container.name}}</div>-->
                    <!--<div style="margin-bottom: 5px">镜像：{{container.image}}</div>-->
                    <!--<div style="margin-bottom: 5px">环境变量：{{container.env}}</div>-->
                    <!--<div style="margin-bottom: 5px">命令：{{container.command}}</div>-->
                    <!--<div style="margin-bottom: 5px">参数：{{container.args}}</div>-->

                    <!--<div style="margin-bottom: 5px">端口：{{container.ports}}</div>-->
                    <!--<div style="margin-bottom: 5px">挂载券：{{container.volumeMounts}}</div>-->
                    <el-row style="margin-bottom: 10px">
                        <el-col :span="24"><div style="font-size:15px;font-weight:bold">{{container.name}}</div>
                        </el-col>

                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">镜像</el-col>
                        <el-col :span="20">{{container.image}}</el-col>
                    </el-row>

                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">环境变量</el-col>
                        <el-col :span="20" v-if="container.env === '' || container.env === undefined">--</el-col>
                        <el-col :span="20" v-else>{{container.env}}</el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">命令</el-col>

                        <el-col :span="20" v-if="container.command === '' || container.command === undefined">--</el-col>
                        <el-col :span="20" v-else>{{container.command}}</el-col>

                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">参数</el-col>

                        <el-col :span="20" v-if="container.args === '' || container.args === undefined">--</el-col>
                        <el-col :span="20" v-else>{{container.args}}</el-col>

                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">端口</el-col>
                        <el-col :span="20">
                                    <div v-for="port in container.ports">
                                        <div v-for="(v,k) in port" style="margin-bottom: 3px;font-style: italic;">{{k}}:&nbsp;&nbsp;{{v}}
                                        </div>
                                    </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2">挂载券</el-col>


                        <el-col :span="20">
                            <div v-for="volume in container.volumeMounts">
                                <div v-for="(v,k) in volume" style="margin-bottom: 3px;font-style: italic;">{{k}}:&nbsp;&nbsp;{{v}}
                                </div>
                            </div>
                        </el-col>

                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col :span="2" >券</el-col>


                        <el-col :span="20"  >
                            <div v-for="volume in PodDetail.pods.volumes">
                                <div style="margin-bottom: 3px;font-style: italic;">type:&nbsp;&nbsp;nfs</div>
                                <div style="margin-bottom: 3px;font-style: italic;">name:&nbsp;&nbsp;{{volume.name}}</div>

                                <div v-for="(v,k) in volume.nfs" style="margin-bottom: 3px;font-style: italic;">{{k}}:&nbsp;&nbsp;{{v}}
                                </div>
                            </div>
                        </el-col>


                    </el-row>



                </el-col>
                <el-col :span="12">




                </el-col>
            </el-row>

        </el-card>

        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>现状</div>
            <hr>
            <el-table
                    :data="PodDetail.pods.currentconditions"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <el-table-column
                        prop="type"
                        label="类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="reason"
                        label="原因">
                </el-table-column>
                <el-table-column
                        prop="message"
                        label="消息">
                </el-table-column>
            </el-table>


        </el-card>



        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>事件</div>
            <hr>
            <el-table
                    :data="PodDetail.events"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <template slot="empty">
                    <p>暂无事件内容或已过期</p>

                </template>

                <el-table-column
                        prop="message"
                        label="消息"
                        width="600">
                </el-table-column>
                <el-table-column
                        prop="source"
                        label="来源">
                </el-table-column>
                <el-table-column
                        prop="childobject"
                        label="子对象"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="总数"
                >
                </el-table-column>

                <el-table-column
                        prop="reason"
                        label="原因"
                >
                </el-table-column>
                <el-table-column
                        prop="lastoccurtime"
                        label="最近出现于"
                >
                </el-table-column>


            </el-table>

        </el-card>
    </section>
</template>

<script>
    import { k8sPodDetailData } from '../../api/api'
    export default {
        data() {
            return {
                PodDetail: {
                    pods:{},

                },
            }
        },
        methods: {

            getK8sPodDetailData(){
                let self = this
                let param = {name:this.$route.params.name,namespace:this.$route.query.namespace}
                k8sPodDetailData(param).then((res) => {
                    console.log(res)
                    self.PodDetail.pods = res.pods
                    self.PodDetail.events = res.events
                    // self.PodDetail.currentconditions = res.currentconditions




                })

            },
            rowStyle({ row, rowIndex}){
                return "height:40px;background-color: #FAFAFA;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },

        },
        mounted: function () {
            console.log(this.$route.params.name)
            console.log(this.$route.query.namespace)
            this.getK8sPodDetailData()
        }
    }
</script>
<style>
    #k8s-pods .bg-card {
        background-color: #FAFAFA;
    }
    #k8s-pods .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }
</style>